<template>
  <q-layout view="hHh lpR fFf">
    <q-header elevated class="bg-dark text-white">
      <q-toolbar>
        <q-btn dense flat round icon="menu" @click="toggleLeftDrawer" />
        <q-avatar>
          <img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg" />
        </q-avatar>
        <q-toolbar-title> 天一音乐小程序后台管理 </q-toolbar-title>
        <q-avatar color="primary" text-color="white"
          >{{ nicknameFirstWord }}
          <q-menu fit anchor="bottom left" self="top left">
            <q-item clickable @click="handleLogout">
              <q-item-section>退出</q-item-section>
            </q-item>
          </q-menu>
        </q-avatar>
      </q-toolbar>
    </q-header>

    <q-drawer show-if-above v-model="leftDrawerOpen" side="left" bordered>
      <q-list padding class="rounded-borders text-primary">
        <q-item
          clickable
          v-ripple
          active-class="menu-active"
          v-for="item in menuRoutes"
          :key="item.meta.title"
          :active="item.name === route.name"
          :to="item.path"
        >
          <q-item-section avatar>
            <q-icon :name="item.meta.icon" />
          </q-item-section>

          <q-item-section>{{ item.meta.title }}</q-item-section>
        </q-item>
      </q-list>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>
<script setup>
import { ref, computed } from 'vue';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
import { menuRoutes } from '../router/index';

const leftDrawerOpen = ref(false);
const store = useStore();
const route = useRoute();

const handleLogout = () =>
  store.dispatch('user/logout').then(() => window.location.reload());

const nicknameFirstWord = computed(
  () => store.getters['user/nicknameFirstWord']
);

const toggleLeftDrawer = () => {
  leftDrawerOpen.value = !leftDrawerOpen.value;
};
</script>
<style lang="sass">
.menu-active
  color: white!important
  background: #1976D2
</style>
